<template>
  <!-- 三个月内有已绑定的坞修单 -->
  <el-dialog
    v-model="props.visible"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('dockRepair.dialogTitle') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <div class="has">
      <div
        class="title flexcc"
        v-html="t('dockRepair.dialogText')"
      ></div>

      <div class="radiolist mt-5">
        <div class="item">
          <el-radio-group v-model="bound">
            <el-radio
              :label="item.id"
              v-for="item in orderList"
              :key="item.id"
            >
              {{ `${item.orderNo} ${item.dockOrderName || ''}` }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="btn flexcc mt-5">
        <el-button
          type="primary"
          @click="handleImport"
          :disabled="bound === null"
        >
          {{ t('dockRepair.btn6') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="handleCreate"
        >
          {{ t('dockRepair.btn7') }}
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useDockRepair from '@/stores/dockRepair.js'

import { copyDockOrderApi } from '@/service/dockOrder'

const { t, locale } = useI18n()

const router = useRouter()
const route = useRoute()
const store = useDockRepair()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // 三个月内有已绑定的坞修单
  orderList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['close', 'handleImport', 'handleCreate'])

const handleClose = () => {
  emit('close')
}

// 导入坞修单
const handleImport = () => {
  const { count, natureLabel, countEn, natureLabelEn } = store.orderInfo
  if (!count || !natureLabel) {
    ElMessage.warning(t('dockRepair.step2page.w1'))
    return
  }

  const { shippingName } = store.ship

  const dockOrderName = `${shippingName}${count}${natureLabel}`
  const dockOrderNameEn = `${shippingName}${' '}${countEn}${' '}${natureLabelEn}`

  copyDockOrderApi({
    dockOrderId: bound.value,
    dockOrderName,
    dockOrderNameEn
  }).then(({ data }) => {
    emit('handleImport', data)
  })
}

// 生成新的坞修单
const handleCreate = () => {
  emit('handleCreate')
}

// 选择的 已绑定的坞修单
const bound = ref(null)
</script>

<style scoped lang="scss">
.has {
  padding: 0 40px;
  .title {
    font-size: 18px;
    color: #252628;
    font-weight: bold;
    text-align: center;
    padding: 0 80px;
  }
  .btn {
    //padding: 0 100px;
    .el-button {
      height: 40px;
    }
  }
}
</style>
